import MusicClosecon from '@/assets/icon-music-close.svg';
import MusicDefualtIcon from '@/assets/icon-music-default.svg';
import { useEffect, useState } from 'react';
export default function BgMusicControl() {
  const [playing, setPlaying] = useState<boolean>(
    !window?.bgSound?.paused || false,
  );

  useEffect(() => {
    if (window.bgSound) {
      window.bgSound.onplay = function () {
        setPlaying(true);
      };

      window.bgSound.onpause = function () {
        setPlaying(false);
      };
    }
  }, []);

  return (
    <i
      onClick={() => {
        window.bgSound.paused ? window.bgSound.play() : window.bgSound.pause();
      }}
      className=" fixed right-2 top-2  w-8 h-8 bg-cover bg-no-repeat bg-center z-30"
      style={{
        backgroundImage: `url(${playing ? MusicDefualtIcon : MusicClosecon})`,
      }}
    ></i>
  );
}
